<template>
	<view class="content" style="min-height: 100vh;">
		
		<u-mask :show="curtain_show"  :z-index="9" @click="curtain_show_change" :duration="0"></u-mask>
		<u-sticky >
			
			<view class="buildings-top" >
				<view class="buildings-dh">
					<u-icon name="search" size="35" color="#969696" class="search-icon"></u-icon>
					<u-field @confirm="confirm" :border-bottom="false" v-model="title" :label-width="0" placeholder="请输入商铺名称或地点" class="search-input">
					</u-field>
				</view>


			</view>

			<view :class="['dropdown']">
				<dropdown @change="(res)=>curtain_show=res" ref="dropdown" @getField="getField" :filterDataProps="filterData"></dropdown>
			</view>
		</u-sticky>




		<view class="recommended">
			<view class="recommended-content">

				<navigator v-for="(item,index) in store.data" :key="index" :url="`./StoreContent?id=${item.id}`">
					<ListPart class="recommended-part" :sourceDataProp="listPart(item)"></ListPart>
					<view v-show="index != store.data.length-1">
						<u-line></u-line>
					</view>
				</navigator>

			</view>

			<view class="view-loading" v-show="store.loading">
				<u-loadmore :status="store.loading" />
			</view>


		</view>



		<u-toast ref="uToast" />

	</view>
</template>

<script>
	const filterData = {
		'area': [],
		'price': [{ //价格
				text: '不限',
				value: {
					'equal-store-meters_money': ""
				}
				// value: ""
			}, {
				text: '50元以下',
				value: {
					'lessEq-store-meters_money': 50
				}
			}, {
				text: '50~80元',
				value: {
					'between-store-meters_money': '50,80'
				}
			}, {
				text: '80~100元',
				value: {
					'between-store-meters_money': '80,100'
				}
			},
			{
				text: '100~120元',
				value: {
					'between-store-meters_money': '100,120'
				}
			},
			{
				text: '120~150元',
				value: {
					'between-store-meters_money': '120,150'
				}
			},
			{
				text: '150~200元',
				value: {
					'between-store-meters_money': '150,200'
				}
			},
			{
				text: '200元以上',
				value: {
					'greaterEq-store-meters_money': 200
				}
			}
		],
		'acreage': [{ //面积
				text: '不限',
				value: {
					'equal-store-spaceNum': ""
				}
				// value: ""
			}, {
				text: '100㎡以下',
				value: {
					'lessEq-store-spaceNum': 100
				}
			}, {
				text: '100-200㎡',
				value: {
					'between-store-spaceNum': '100,200'
				}
			}, {
				text: '200-300㎡',
				value: {
					'between-store-spaceNum': '200,300'
				}
			},
			{
				text: '300-500㎡',
				value: {
					'between-store-spaceNum': '300,500'
				}
			},
			{
				text: '500-1000㎡',
				value: {
					'between-store-spaceNum': '500,1000'
				}
			},
			{
				text: '1000㎡以上',
				value: {
					'greaterEq-store-spaceNum': 1000
				}
			},

		],
		'decorate': [{ //装修
				text: '不限',
				value: {
					'equal-store-decorate': ""
				}
				// value: ""
			}, {
				text: '豪装',
				value: {
					'equal-store-decorate': "豪装"
				}
			}, {
				text: '精装',
				value: {
					'equal-store-decorate': "精装"
				}
			}, {
				text: '简装',
				value: {
					'equal-store-decorate': "简装"
				}
			},
			{
				text: '标准交付',
				value: {
					'equal-store-decorate': "标准交付"
				}
			},
			{
				text: '毛坯',
				value: {
					'equal-store-decorate': "毛坯"
				}
			},
		],
	}
	import dropdown from "@/components/dropdown/index"
	import ListPart from "@/components/list/ListPart.vue"
	import {storeList} from "@/services/store.js" 
	

	export default {
		components: {
			dropdown,
			ListPart
		},
		data() {
			return {
				curtain_show: false, //幕布
				title: '',
				store: {
					loading: 'loading',
					data: [],
					config: {
						pageSize: 10,
						page: 1,
						keyWord: {
							'AND': {
								'OR': [],
								'AND': []
							},
						},
					}
				},
				filterData: filterData,
				sourceData: [], //搜索数据
				buildingsLoading: false,

			}
		},
		created() {
			
			this.storeListLoad()
		},
		onReachBottom() {
			if(this.store.loading != 'nomore'){
				this.storeAdd()
			}
		},
		watch: {
			title(newValue, oldValue) {
				this.store.config.keyWord['AND']['OR'][0] = {
					'like-store-title': newValue,
					'like-store-address': newValue,
				}
			}


		},
		methods: {
			confirm(e) {
				this.store.config.page = 1
				this.store.data = []
				this.storeListLoad()
			},
			storeAdd() {
				this.store.config.page++
				this.storeListLoad()
			},
			listPart(item) {
				return {
					images: item.cover_image,
					tagList: item.tagList,
					street: item.street_name,
					community: item.community_name,
					zhandi: item.spaceNum,
					price: item.meters_money,
					title: `${item.spaceNum}㎡ · ${item.title}`,
				}
			},
			async storeListLoad() {
				this.store.loading = 'loading'
				let res = await storeList(this.store.config)
				if (res.code == 200) {
					let data = res.data
					if (data.length > 0) {
						this.store.data = [...this.store.data, ...data]
						
						this.store.loading = data.length <  this.store.config.pageSize? 'nomore':'loadmore'
					} else {
						if (this.store.config.page > 1) {
							this.store.config.page--
						}
						this.store.loading = 'nomore'
					}

				}
			},
			curtain_show_change() {
				this.$refs.dropdown.showList = ''
			},
			getField(last) {
				this.store.config.keyWord['AND']['AND'][0] = last
				this.store.config.page = 1
				this.store.data = []
				this.storeListLoad()
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		position: relative;
		background: white;
		width: 100%;
	}

	.curtain {
		width: 100%;
		// min-height: 100vh;
		height: 100%;
		position: absolute;
		top: 0;
		background: black;
		opacity: 0.5;
		z-index: 1;
	}

	.buildings-top {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;
		position: relative;
		// border: 1rpx solid red;
		padding: 15rpx 20rpx 15rpx 20rpx;
		z-index: 10;

		.buildings-dh {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			background: #f5f5f5;

			.search-icon {
				margin-left: 30rpx;
			}

			.search-input {
				// margin-right: 20rpx;
				flex: 1;
			}
		}


	}

	.dropdown {
		width: 100%;
		padding-top: 15rpx;
		position: relative;
		background: white;
		padding-top: 15rpx;
		z-index: 99;
	}

	.dropdown-pos {
		position: fixed;
		top: 0;
	}

	.recommended {
		// background: white;
		width: 100%;
		margin-top: 20rpx;
		// min-height: 100vh;
		padding-bottom: 20rpx;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
	}

	.view-loading {
		width: 100%;
		display: flex;
		background: #ffffff;
		justify-content: center;
	}
</style>
